<template>
	<view>
		<scroll-view id="my_scroll" :scroll-y="true" :scroll-top="scrollTop" class="msg-style">
			<view v-for="(it, key) in chatList" style="width: 96%;margin-left: 2%; ">
				<!-- 消息框 -->
				<view class="row-box" :class="it.receiveUser == receiveUser ? 'right_chat':'left_chat'">
					<u-avatar class="avatar_sty" v-if="it.sendUser !== userInfo.id"></u-avatar>
					<view class="chat_box" :class="it.content == 'right' ? 'right_chat_box':'left_chat_box'">
						<text v-if="it.msgType == 1">{{it.content}}</text>
						<!-- 图片显DOM -->
						<image v-else class="image_sty" :src="prfixUrl + it.content" @click="previewImage(key)"></image>
					</view>
					<u-avatar class="avatar_sty" v-if="it.sendUser == userInfo.id"></u-avatar>
				</view>
			</view>
		</scroll-view>
		
		<view class="input_box">
			<textarea auto-height v-model="msg" maxlength="80" placeholder="请输入..." class="input_sty"></textarea>
			<view style="width: 10%;margin-left: 15rpx;" @click="sendImage()">
				<image src="../../static/image.png" style="width: 60rpx;height: 60rpx;"></image>
			</view>
			<view style="width: 15%;">
				<u-button size="small" type="primary" @click="sendMsg">发送</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import $path from "@/utils/ServerPath.js"
	export default {
		data() {
			return {
				prfixUrl: $path.url,
				scrollTop: 0,
				msg: null,
				//当前登录userId
				userInfo: undefined,
				chatList: [],
				detail: {},
				sessionId: -1,
				queryParams: {
					inquiryOrderId: undefined,
					offerOrderId: undefined
				},
				//收件人id
				receiveUser: undefined,
			}
		},
		onLoad(param) {
			this.queryParams.inquiryOrderId = param.inquiryOrderId;
			this.queryParams.offerOrderId = param.offerOrderId;
			this.receiveUser = param.receiveUser;
			this.messageList();
			this.userInfo = uni.getStorageSync(this.$constant.ROLE_INFO_KEY);
		},
		methods: {
			/* 获取消息列表 */
			messageList() {
				this.$request("/appCommon/msg/list", "get", this.queryParams).then(res => {
					this.chatList = res.data;
					this.scollHeight();
				})
			},
			/* 图片预览 */
			previewImage(k) {
				let urls = [];
				let current = 0;
				this.chatList.forEach( (img, key) => {
					if(img.msgType == 2) {
						if(k == key) {
							current = urls.length;
						}
						urls.push($path.url + img.content);
					}
				})
				uni.previewImage({
					current: current,
					urls: urls
				})
			},
			/* 发送图片 */
			sendImage() {
				uni.chooseImage({
					success: (res) => {
						res.tempFilePaths.forEach(img => {
							uni.uploadFile({
								url: $path.prefix + "/appCommon/upload",
								filePath: img,
								name: "file",
								success: (res) => {
									const data = JSON.parse(res.data)
									this.sendMsg(data.fileName, 2);
								},
								fail:(err) => {
									console.log(err)
								}
							})
						})
					}
				})
			},
			sendMsg(e, type) {
				const msg = e ? e : this.msg
				if(!msg) 
					return
				const data = {
					inquiryOrderId: this.queryParams.inquiryOrderId,
					offerOrderId: this.queryParams.offerOrderId,
					receiveUser: this.receiveUser,
					sendUser: this.userInfo.id,
					content: msg,
					msgType: type ? type : 1
				}
				this.$request("/appCommon/sendOrderMsg", "post", data).then(res => {
					this.chatList.push(data);
					this.scollHeight();
				})
				this.msg = null;
			},
			/* 设置高度 */
			scollHeight() {
				let num = 0;
				this.chatList.forEach(it => {
					if(it.type == 1) {
						num += 100;
					}else {
						num += 200;
					}
				})
				this.scrollTop = num;
				if(this.scrollTop > 600) {
					uni.pageScrollTo({
						scrollTop: this.scrollTop,
						duration: 1000,
						selector: "#my_scroll"
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		width: 100%;
		margin-left: 0rpx;
		background-color: #F3F4F6;
	}
	.msg-style {
		width: 100%;
		height: 1300rpx;
		padding-bottom: 150rpx;
		margin-top: 30rpx;
	}
	.input_sty {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 63%;
		padding: 10rpx;
	}
	.input_box {
		width: 100%;
		background-color: #ceccca;
		border-top: solid 1rpx #ceccca;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		padding: 20rpx 20rpx 30rpx 0;
		padding-left: 4%;
	}
	.left_chat_box {
		border-radius: 0rpx 20rpx 20rpx 20rpx;
	}
	.left_chat {
		width: 100%;
	}
	.right_chat {
		width: 100%;
		justify-content: flex-end;
	}
	.right_chat_box {
		border-radius: 20rpx 0rpx 20rpx 20rpx;
	}
	.chat_box {
		padding: 20rpx;
		background-color: #FFFFFF;
		margin: 20rpx;
		max-width: 300rpx;
	}
	.avatar_sty {
		margin-top: 20rpx;
	}
	.image_sty {
		width: 200rpx;
		height: 200rpx;
	}
</style>